Bootstrap

Introducción

Bootstrap es un framework orientado al desarrollo web centrado en el enmaquetado HTML y diseño CSS para la creación del front-end de aplicaciones web.

Una de las características es lograr un diseño adaptativo para los diferentes dispositivos.

Incluye componentes reutilizables.

Bootstrap se basa en el uso de plantillas, las cuales siguen un diseño adaptativo (Responsive Design).

Diseño con rejillas (grids)

Para comenzar a trabajar con Bootstrap es necesario tener en mente algunas consideraciones:

• Es necesario trabajar con HTML5.

• Para que el código resultante se adapte al tipo de dispositivo, es necesario añadir el siguiente código:

  xxxxxxxxxx
  1
  1
  <meta name="viewport" content="width=device-width, initial–scale=1">
  

• Gracias a la utilización de la clase container se consigue que el resultado de la web se pueda centrar automáticamente.

Bootstrap incorpora una rejilla para poder insertar los elementos. Esta rejilla ha sido diseñada para trabajar con móviles y seguir un diseño adaptativo. La rejilla puede variar su tamaño de manera dinámica acorde con el tamaño de la pantalla del dispositivo utilizado.

Se pueden distinguir cuatro tipos de rejillas según el dispositivo que se considere:

• Para teléfonos (xs).

• Para Tablet (sm).

• Para equipos de sobremesa (md).

• Para equipos de sobremesa con pantalla grande (lg).

xxxxxxxxxx
12
1
$grid-breakpoints: (
2
  /* Extra small screen / phone */
3
  xs: 0,
4
  /* Small screen / phone */
5
  sm: 576px,
6
  /* Medium screen / tablet */
7
  md: 768px,
8
  /* Large screen / desktop */
9
  lg: 992px,
10
  /* Extra large screen / wide desktop */
11
  xl: 1200px
12
);

Los diferentes tipos de rejillas se pueden combinar según las necesidades del programador.

Formularios

Bootstrap implementa un manejo de formularios mejorado.

Para poder utilizar formularios es necesario utilizar la clase form-control aplicada a los diferentes elementos de un formulario (input, textarea...).

Para indicar que los diferentes elementos forman parte de un formulario es necesario crear un contenedor utilizando la clase form-group.

Para poder controlar el espacio que ocupa un formulario, se utiliza la clase form-inline a nivel de la etiqueta form de HTML5.

xxxxxxxxxx
15
1
<form class="form-inline" role="form">
2
  <div class="form-group">
3
    <label class="sr-only" for="ejemplo_email_1">Email</label>
4
    <input type="email" class="form-control" id="ejemplo_email_1" placeholder="Introduce un email">
5
  </div>
6
  <div class="form-group">
7
    <label class="sr-only" for="ejemplo_password_1">Contraseña</label>
8
    <input type="password" class="form-control" id="ejemplo_password_1" placeholder="Contraseña">
9
  </div>
10
  <div class="checkbox">
11
    <label>
12
      <input type="checkbox"> No cerrar sesión
13
    </label>
14
  </div>
15
</form>

Se pueden añadir efectos visuales según el estado en el que esté un campo de un formulario. Para ello se puede utilizar el atributo box-shadow.

También se pueden deshabilitar campos de un formulario utilizando el atributo disabled.

Cuando se envía un formulario, hay tres estados diferentes:

1. has-error: se utiliza para campos del formulario que tienen errores.

2. has-success: para campos correctos del formulario.

3. has-warning: para campos que son válidos pero sería conveniente modificarlos.

Componentes

Una de las características y funcionalidades más importantes de Bootstrap es la posibilidad de utilizar componentes.

En el framework existe un amplio número de componentes CSS disponibles para su utilización: